<template>
    <div class="app-container">
        <el-table
            :data="list"
            v-loading=false
            element-loading-text="Loading"
            border
            fit
            highlight-current-row>
                <el-table-column align="center" label="序号">
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <p v-html="getStatus(scope.row)"></p>
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="scope">
                        <p>{{ scope.row.Name }} / <router-link class="logA" :to="{ name: 'Logs', params: { deployment: scope.row.Name, ns: 'k8scode' } }">日志</router-link> / <a class="shellA" href="javascript:;">终端</a></p>
                        <p class="red">{{ getMessage(scope.row) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="命名空间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.NameSpace }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="镜像" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.Images }}</p>
                        <p>副本:<span class="green">{{ scope.row.Replicas[0] }}</span>/<span class="red">{{ scope.row.Replicas[2] }}</span></p>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">{{ scope.row.CreateTime }}</template>
                </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getList } from '@/api/deployments'
export default {
    data() {
        return {
            list: null
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getList("k8scode").then(response => {
                this.list = response.data
            })
        },
        getStatus(row) {
            if (row.IsComplete) {
                return "<span class='green'>Active</span>"
            } else {
                return "<span class='red'>Waiting</span>"
            }
        },
        getMessage(row) {
            if (!row.IsComplete) {
                return row.Message
            } else {
                return ''
            }
        },
    }
}
</script>
<style>
    .red {
        color: #d20000
    }
    .green {
        color: green
    }
    .logA {
        color: skyblue;
    }
    .shellA {
        color: red;
    }
</style>